<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div class="topo-editor">
    <wresize-panel3 class="full-height">
      <template v-slot:left>
        <topo-toolbox ref="topoToolbox" class="topo-toolbox" />
      </template>

      <template v-slot:center>
        <topo-main ref="topoMain" class="topo-main" />
      </template>

      <template v-slot:right>
        <topo-properties ref="topoProperties" class="topo-properties" />
      </template>
    </wresize-panel3>
  </div>
</template>

<script>
import WresizePanel3 from '@/topo/components/panel/WresizePanel3'
import TopoToolbox from '@/topo/components/topo/TopoToolbox'
import TopoMain from '@/topo/components/topo/TopoMain'
import TopoProperties from '@/topo/components/topo/TopoProperties'

export default {
  name: 'TopoEditor',
  components: {
    WresizePanel3,
    TopoToolbox,
    TopoMain,
    TopoProperties
  },
  data() {
    return {
      templateName: null,
      deviceId: null

    }
  },
  created() {
    const param = this.$route.query
    this.templateName = param.templateName
    this.deviceId = param.deviceId
    this.setTagsViewTitle()
  },
  methods: {
    setTagsViewTitle() {
      this.tempRoute = Object.assign({}, this.$route)
      const route = Object.assign({}, this.tempRoute, {
        title: `${this.templateName}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    }
  }
}
</script>

<style lang="scss">
  .topo-editor {
    position: relative;
    width: 100%;
    height: calc(100vh);

    .topo-toolbox {
      width: 100%;
      height: calc(100vh - 10px);
    }

    .topo-main {
      width: 100%;
      height: calc(100vh - 10px);
    }

    .topo-properties {
      width: 100%;
      height: calc(100vh - 10px);
    }
  }
</style>
